<template>
	<view class="kjBg">
		
		<div class="container">
			<div style="height: 1px;"></div>
			<div class="spDetail" v-if="ptcomplete">
				<h2 class="textTlt">我的成团</h2>
				<div class="ptList">
					<div class="item">
						<div class="tuanInfo">
							<div class="l">
								<div class="avainfo">
									<image :src="myTuan[0].creatorInfo.avatarUrl" mode="widthFix"></image>
								</div>
								<div class="nickInfo">{{myTuan[0].creatorInfo.nickname}}</div>
							</div>
							<div class="t">团</div>
							<div class="r">
								<div class="avainfo">
									<image :src="myTuan[0].joinuserInfo.avatarUrl" mode="widthFix"></image>
								</div>
								<div class="nickInfo">{{myTuan[0].joinuserInfo.nickname}}</div>
							</div>
						</div>
						<div class="spInfo">
							<div class="banner">
								<image :src="spDetail.img" mode="widthFix"></image>
							</div>
							<div class="flexBox">
								<div class="price">￥<span>{{ spDetail.price }}</span>元</div> 
								<div class="price"> 丨 </div>
								<div class="price">成团价 ￥<strong>{{ spDetail.yhprice }}</strong>元</div>
							</div>
							
							<h2>{{ spDetail.title }}</h2>
						</div>
						<div class="btnBox">
							<u-button type="error" text="咨询客服,使用优惠" @click="toZixun()"></u-button>
						</div>
					</div>
				</div>
			</div>
			<div class="spDetail mgbt100" v-else>
				<div class="ptList" v-if="ptList.length > 0">
					<h2 class="textTlt">拼团列表</h2>
					<div class="item" v-for="(item,index) in ptList" :key="index">
						<div class="creator">
							<div class="flex">
								<div class="avainfo">
									<image :src="item.creatorInfo.avatarUrl" mode="widthFix"></image>
								</div>
								<div class="nickInfo">{{item.creatorInfo.nickname}}</div>
								<div class="joinBtn">
									<u-button type="warning" shape="circle" text="加入拼团" size="small" @click="joinPintuan(item)"></u-button>
								</div>
							</div>
							<div class="detailInfo">
								<div class="tag"><u-tag text="我的发起" plain size="mini" type="warning" v-if="openid == item.creator"></u-tag></div>
								<div class="time">发起时间：{{item.time}}</div>
							</div>
						</div>
					</div>
					<div class="loadMore" @click="getMore()">
						加载更多+
					</div>
				</div>
				<div class="empty" v-else>
					<image class="emptyImg" src="https://www.baixuemianshi.com/zhuanti/images/empty.png" mode="widthFix"></image>
					<h3>暂无拼团</h3>
				</div>
			</div>
			<div class="fixBottom" v-if="!ptcomplete">
				<div class="flexBox" v-if="!ktStatus">
					<u-button type="error" text="我要开团" shape="circle" @click="addPintuan()"></u-button>
				</div>
				<div class="flexBox" v-else>
					<div class="btn">
						<u-button type="error" text="咨询客服" size="small" @click="toZixun()"></u-button>
					</div>
					<div class="btn">
						<u-button type="success" text="发送朋友" size="small" openType="share"></u-button>
					</div>
				</div>
			</div>
			
		</div>
		
		<u-toast ref="uToast"></u-toast>
		
	</view>
</template>

<script>
import { mapActions } from 'vuex';
const db = wx.cloud.database();
export default {
	data() {
		return {
			openid: "",
			userInfo: {
				_id:"",
				phone: "",
				nickname:"",
				avatarUrl: ""
			},
			spid: "",
			creator:"",
			joinuser: "",
			ptList: [],
			page: 0,
			myTuan:"",
			ptcomplete: false,
			spDetail:"",
			ktStatus:false
		};
	},
	computed: {
		userphone() {
			return this.$store.getters.userphone ? this.$store.getters.userphone : '';
		}
	},
	onShareAppMessage(options) {},
	onShareTimeline(res) {},
	onShow() {},
	onPageScroll(e) {
		let that = this;
	},
	onLoad(options) {
		this.spid = options.spid
	},
	watch: {
		userphone(val){
			if(this.userphone){
				this.getUserDetail()
			}
		}
	},
	created() {
		let that = this;
		this.getopenid()
		
	},
	mounted() {
		this.getPtList();
		this.getspDetail()
	},
	methods: {
		...mapActions([]),
		getopenid() {
			let that = this
			wx.cloud.callFunction({
				name: 'getopenid',
				data: {},
				complete: res => {
					wx.setStorageSync("useropenid", res.result.openid)
					that.openid = res.result.openid
					that.getUserDetail()
					that.getMytuan()
					that.getmyAdd()
				}
			})
		},
		getspDetail(){
			let that = this
			db.collection("pintuan_gooks").doc(that.spid).get({
				success: res =>{
					that.spDetail = res.data
				}
			})
		},
		getUserDetail() {
			let that = this
			db.collection('all_user').where({
				_openid: that.openid
			}).get({
				success: res => {
					if (res.data.length > 0) {
						that.userInfo._id = res.data[0]._id
						that.userInfo.phone = res.data[0].phone
						that.userInfo.nickname = res.data[0].nickname
						that.userInfo.avatarUrl = res.data[0].avatarUrl
						that.LogSetPhone(that.userInfo.phone)
					}
				}
			})
		},
		getPtList() {
			let that = this;
			db.collection('pintuan_user').where({
				spid: that.spid,
				status: "未完成"
			}).skip(that.page * 3).limit(3).get({
				success: res => {
					if(res.data.length > 0){
						that.ptList = that.ptList.concat(res.data)
					}else{
						that.showToast({
							type: "error",
							message:"没有更多数据"
						})
					}
					
				}
			})
		},
		getMore(){
			this.page += 1
			this.getPtList()
		},
		getMytuan(){
			let that = this
			db.collection('pintuan_user').where({
				spid: that.spid,
				status: "已完成",
				creator: that.openid
			}).get({
				success: res => {
					if(res.data.length > 0){
						that.myTuan = res.data
						that.ptcomplete = true
					}
				}
			})
			db.collection('pintuan_user').where({
				spid: that.spid,
				status: "已完成",
				joinuser: that.openid
			}).get({
				success: res => {
					if(res.data.length > 0){
						that.myTuan = res.data
						that.ptcomplete = true
					}
				}
			})
		},
		async addPintuan(){
			let that = this
			let count1 = await db.collection('pintuan_user').where({creator:that.openid,spid:that.spid}).count()
			let count2 = await db.collection('pintuan_user').where({joinuser:that.openid,spid:that.spid}).count()
			if(count1.total + count2.total){
				that.showToast({
					type:"error",
					message:"您已参与拼团"
				})
				return
			}
			db.collection('pintuan_user').add({
				data:{
					spid: that.spid,
					creator: that.openid,
					creatorInfo: that.userInfo,
					joinuser: "",
					joinuserInfo: {},
					status:"未完成",
					time: that.getTime()
				},
				success: res => {
					that.showToast({
						type:"success",
						message:"开团成功！"
					})
					that.page = 0
					that.ptList = []
					that.getPtList()
					that.getmyAdd()
				}
			})
		},
		getmyAdd(){
			let that = this
			db.collection("pintuan_user").where({spid: that.spid,creator: that.openid,status: "未完成"}).get({
				success:res => {
					console.log(res)
					if(res.data.length > 0){
						that.ktStatus = true
					}
				}
			})
		},
		toZixun(){
			let that = this
			uni.navigateTo({
				url: "../../webview/index?href=" + encodeURIComponent("https://www.baixuemianshi.com/zhuanti/zx_ewm/") 
			})
		},
		getTime(){
			let that = this
			let day = new Date()
			let y = day.getFullYear()
			let m = (day.getMonth() + 1).toString().padStart(2, '0');
			let d = day.getDate().toString().padStart(2, '0');
			let hour = day.getHours().toString().padStart(2, '0');
			let miu = day.getMinutes().toString().padStart(2, '0');
			let time = y + '-' + m + '-' + d + ' ' + hour + ':' + miu
			return time
		},
		async joinPintuan(info){
			let that = this
			if(info.creator == that.openid){
				that.showToast({
					type:"error",
					title:"错误",
					message: "不能加入自己的拼团"
				})
				return
			}
			if(that.ptcomplete){
				that.showToast({
					type:"error",
					title:"错误",
					message: "您已拼团成功，不能二次拼团"
				})
				return
			}
			let status = await db.collection('pintuan_user').doc(info._id).get()
			if(status.data.status == "未完成"){
				db.collection('pintuan_user').doc(info._id).update({
					data: {
						joinuser: that.openid,
						joinuserInfo: that.userInfo,
						status: "已完成"
					},
					success: function(res){
						that.showToast({
							type:"success",
							title:"成功",
							message: "拼团成功"
						})
						that.ptList = []
						that.page = 0
						that.getPtList()
						that.getMytuan()
					}
				})
			}
		},
		showToast(params) {
			this.$refs.uToast.show({
				...params
			})
		}
	},
	components: {  }
};
</script>

<style>
@import url('./index.css');
</style>
